<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>储值卡概览-鹿程智慧油站商户平台</title>
		<meta name="description" content="鹿程科技是提供加油站互联网化零管系统、营销及支付和大数据分析运营服务的行业领先科技公司。鹿程科技充分了解加油站行业的需求和新兴互联网的发展,依靠业内最先进的科技和标准化的运营,持续帮助油站业务发展创造价值。"/>
		<meta name="keywords" content="智慧油站,鹿程,鹿程智慧油站,鹿程智慧油站微信支付,加油站微信支付,加油站营销管理"/>
		<link rel="icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link rel="shortcut icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<link rel="stylesheet" href="../css/style.css" />
	</head>
<body>
	<section class="section-right">
		<!--deer-tit-->
		<div class="deer-tit">
			<h3>用户消费</h3>
			<h4>订单销售报表</h4>
		</div>
		<!--/deer-tit-->
		<!--deer-content-->
		<div class="deer-content">
			<div class="order-nav clearfix layui-form">
				<dl style="width: 320px"><input name="search_time" placeholder="请输入查询时间" class="layui-input" id="search_time" lay-key="1"></dl>
            	<div class="order-nav-search">
            		<dl class="deer-btn" id="submint">查询</dl>
            		<dl class="deer-btns" id="export">复位</dl>
            	</div>
			</div>
			<div class="gas-border">
				<div class="echarts_box" id="main" style="margin-top: 40px;">
					
				</div>
				
			</div>
			
			
		</div>
		<!--/deer-content-->
	</section>
	<!--js-->
		<aside>
			<script type="text/javascript" src="../layui/layui.js" ></script>
			<script type="text/javascript" src="../js/echarts.min.js" ></script>
			<script type="text/javascript" src="../js/jquery.min.js" ></script>
			<script type="text/javascript" src="https://static.zhihuiyouzhan.com.cn/static/styles/admin/js/ec/echartsConfig.js"></script>
			<script type="text/javascript" src="https://static.zhihuiyouzhan.com.cn/static/styles/admin/js/ec/ext.js"></script>
			<script type="text/javascript">
				layui.use(['laydate'],function(){
					var laydate=layui.laydate;
						laydate.render({
					        elem: '#search_time', //指定元素
							type: 'datetime',
					        range: '/',
				    	});
				})
				
				var myChart3 = echarts.init(document.getElementById('main'));
				function getColorPalette(name) {
				    name = name || window.chartCfg.themeName;
				    return window.chartCfg.colors;
				}
			
				var oldToolBox = [];
			
				var baseOption = {
				    toolbox: {
				        show: true,
				        feature: {
				            dataView: {
				                show: true,
				                readOnly: false,
				                optionToContent: function(opt) {
				                    var axisData = opt.xAxis[0].data;
				                    var series = opt.series;
				                    var table = '<table style="width:100%;text-align:center"><tbody><tr>' +
				                        '<td>' + (opt.xAxis[0].name || '时间') + '</td>' +
				                        '<td>' + series[0].name + '</td>' +
				                        '<td>' + series[1].name + '</td>' +
				                        '<td>' + series[2].name + '</td>' +
				                        '</tr>';
				                    for (var i = 0, l = axisData.length; i < l; i++) {
				                        table += '<tr>' +
				                            '<td>' + axisData[i] + '</td>' +
				                            '<td>' + series[0].data[i] + '</td>' +
				                            '<td>' + series[1].data[i] + '</td>' +
				                            '<td>' + series[2].data[i] + '</td>' +
				                            '</tr>';
				                    }
				                    table += '</tbody></table>';
				                    return table;
				                }
				            },
				            magicType: {
				                show: true,
				                type: ['line', 'bar', 'stack', 'tiled']
				            },
				            restore: {
				                show: false
				            },
				            saveAsImage: {
				                show: true
				            },
				            myShare: {
				                show: true,
				                title: 'Share',
				                icon: 'image://images/share_23.png',
				                name: 'share',
				                onclick: function(chart) {
				                    //console.log(chart);
				                    var features = chart.option.toolbox[0].feature;
				                    //console.log(features);
				                    for (var key in features) {
				                        //console.log(features[key]);
				                    }
			
				                    //遍历取得初始工具栏
				                    zrUtil.each(features, function(index, key) {
				                        //console.log(features[key]);
				                        if (features[key].name !== 'share' && features[key].show === true) {
				                            oldToolBox.push(key);
				                        }
				                    });
			
				                    //调整工具栏显示
				                    zrUtil.each(features, function(index, key) {
				                        //console.log(features[key]);
				                        if (zrUtil.indexOf(oldToolBox, key) > -1) {
				                            features[key].show = !features[key].show;
				                        }
				                    });
			
				                    zrUtil.map(oldToolBox, function(item, index) {
				                        item.show = !item.show;
				                        return item;
				                    });
				                    //console.log(charts[2].chart);
				                    shownChart.setOption({
				                        toolbox: {
				                            feature: features
				                        }
				                    });
				                }
				            }
				        }
				    },
				    tooltip: {
				        trigger: 'axis',
				        /*position: function (pt) {
				        	console.log(pt);
				        	return [pt[0], '10%'];
				        },*/
				        padding: 0,
				        extraCssText: 'box-shadow: 0 0 7px rgba(0, 0, 0, 0.6);',
				        axisPointer: { // 坐标轴指示器，坐标轴触发有效
				            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
				        },
				        backgroundColor: 'rgba(255,255,255,0)',
				        show: true,
				        formatter: function(params) {
				            var stl = '';
				            $(params).each(function(index, serie) {
				                if (serie.componentType === 'series' && serie.dataIndex > -1) {
				                    var colors = myChart3.getOption().color;
				                    var color = colors[index % colors.length];
				                    stl += '<br /> <div style="display:inline-block;width:10px;height:10px;border-radius:5px;background:' + color + ';"></div>&emsp;' + serie.seriesName + ':&emsp;' + serie.value;
				                }
				            });
				            return stl ? '<div style="background:#fff;padding:15px;color:#999;border-radius:5px;">' + (params[0] ? params[0].name : params.seriesName) + stl + '</div>' : '';
				        }
				    }
				};
			
				/*EChart内置辅助类*/
				var zrUtil = echarts.util;
				var zrVector = echarts.vector;
				var zrMatrix = echarts.matrix;
				var zrNumber = echarts.number;
				var zrFormat = echarts.format;
				var zrGraphic = echarts.graphic;
			
				var opt = {
				    title: {
				        text: '消费统计图表'
				    },
				    tooltip: {
				        trigger: 'axis'
				    },
				    legend: {
				    	data:['总原价','总优惠','实际支付总额']
				    },
				    toolbox: {
				        feature: {
				            saveAsImage: {}
				        }
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis: [{
				        type: 'category',
				        boundaryGap: false,
				        data: [
				        		        	"18-01-24",
				        		        	"18-01-25",
				        		        	"18-01-26",
				        		        	"18-01-27",
				        		        	"18-01-28",
				        		        	"18-01-29",
				        		        	"18-01-30",
				        		        	"18-01-31",
				        		        	"18-02-01",
				        		        	"18-02-02",
				        		        	"18-02-03",
				        		        	"18-02-04",
				        		        	"18-02-05",
				        		        	"18-02-06",
				        		        	"18-02-07",
				        		        	"18-02-08",
				        		        	"18-02-09",
				        		        	"18-02-10",
				        		        	"18-02-11",
				        		        	"18-02-12",
				        		        	"18-02-13",
				        		        	"18-02-14",
				        		        	"18-02-15",
				        		        	"18-02-16",
				        		        	"18-02-17",
				        		        	"18-02-18",
				        		        	"18-02-19",
				        		        	"18-02-20",
				        		        	"18-02-21",
				        		        	"18-02-22",
				        	 
				       	]
				    }],
				    yAxis: [{
				        type: 'value'
				    }],
				    series: [{
				        name: '总原价',
				        type: 'line',
				        stack: '总量',
				        lineStyle: {
				            normal: {
				                smooth: true
				            }
				        },
				        areaStyle: {
				            normal: {
				                color: function() {
				                    var color = getColorPalette()[0];
				                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
				                        offset: 0,
				                        color: color.colorRgba(0).toLowerCase()
				                    }, {
				                        offset: 1,
				                        color: color.colorRgba(1).toLowerCase()
				                    }]);
				                }()
				            }
				        },
				        data: [
				        	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            		        	]
				    }, {
				        name: '总优惠',
				        type: 'line',
				        stack: '总量',
				        smooth: true,
				        areaStyle: {
				            normal: {
				                color: function() {
				                    var color = getColorPalette()[1];
				                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
				                        offset: 0,
				                        color: color.colorRgba(0).toLowerCase()
				                    }, {
				                        offset: 1,
				                        color: color.colorRgba(1).toLowerCase()
				                    }]);
				                }()
				            }
				        },
				        data: [
				        	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	 
				        	]
				    }, {
				        name: '实际支付总额',
				        type: 'line',
				        stack: '总量',
				        areaStyle: {
				            normal: {
				                color: function() {
				                    var color = getColorPalette()[2];
				                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
				                        offset: 0,
				                        color: color.colorRgba(0).toLowerCase()
				                    }, {
				                        offset: 1,
				                        color: color.colorRgba(1).toLowerCase()
				                    }]);
				                }()
				            }
				        },
				        data: [
				        	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	            	0, 
			            	 
				        	]
				    }
				     ]
				};
			
				option = zrUtil.merge(opt, baseOption, false);
				myChart3.setOption(option);
					</script>
		</aside>
		<!--/js-->
</body>
</html>